<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.5.0/ol.js"></script>
<% content_for :sidebar do %>
  <%= sidebar_button_link 'Edit Task', edit_task_path(@task) if can? :edit, @task %>
  <%= sidebar_button_link 'New Requirement', new_task_requirement_path(@task) if can? :create, Requirement %>
<% end %>

<ol class="breadcrumb">
  <li class="breadcrumb-item"><%= link_to 'Events', events_path %></li>
  <li class="breadcrumb-item"><%= link_to @task.event.title, event_path(@task.event) %></li>
  <li class="breadcrumb-item active"><%= @task.title %></li>
</ol>

<p>
  <span class="h3"><%= @task.title %></span>
  <% if @task.location.present? %>
    <%= @task.location %>
  <% end %>
</p>
<span class="h3"><%= format_time_span(@task.start_time, @task.end_time) %></span>

<p><%= task_staffing_label(@task) %>
  Requirements met: <%= @task.requirements_met_count %>/<%= @task.requirements_count %></p>

<% if @task.description.present? %>
  <p><b>Description:</b> <%= @task.description %></p>
<% end %>

<%= task_address %>

<% if has_latitude_longitude? %>
  <p>(<%= @task.latitude %>, <%= @task.longitude %>)</p>
<% end %>

<% if has_latitude_longitude? %>
  <div id="map" class="map" style="height:250px"></div>
  <div style="display: none;">
  <a id="task" target="_blank" href=""><%= @task.title %></a>
  <div id="marker" title="Marker"><%= image_tag "location.png" %></div>
</div>
  <script type="text/javascript">
  var popup = new ol.Overlay({
    element: document.getElementById('popup')
  });
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([<%= @task.longitude %>, <%= @task.latitude %>]),
      zoom: 16
    })
  });

  var pos = ol.proj.fromLonLat([<%= @task.longitude %>, <%= @task.latitude %>]);

  var marker = new ol.Overlay({
    position: pos,
    element: document.getElementById('marker'),
    stopEvent: false
  });
  map.addOverlay(marker);

  var task = new ol.Overlay({
    position: pos,
    element: document.getElementById('task')
  });
  map.addOverlay(task);
</script>
<% end %>

<div class='task-tabs'>
  <ul class="nav nav-tabs">
    <li class="active"><a class='task-tabs-anchor' href="#task-requirement-tab" data-toggle="tab">Requirements</a></li>
    <li><a class='task-tabs-anchor' href="#task-availability-tab" data-toggle="tab">Availabilities</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="task-requirement-tab">
      <%= render(partial: 'requirements/task_requirements_table', locals: { requirements: @task.requirements }) %>
    </div>

    <div class="tab-pane" id="task-availability-tab">
      <div id="task_event_availabilities" >
        <%= render(:partial => "availabilities/availabilities_table",
                   :locals => { :availabilities => ( @task.event.responses),
                                :partial_availabilities => ( @task.event.partial_responses) }
                  ) || "No Availabilities yet !" %>

        <%= render(partial: "people/people_table",
                   locals: { people: @task.event.unresponsive_people,
                             title: "No Response" }) || "Everyone Responded !" %>
      </div>
    </div>
  </div>
</div>

<p>
  Created <%= @task.created_at %><br/>
  Last Modified <%= @task.updated_at %></br>
  Last Editor <%= @last_editor %>
</p>
